<template>
  <el-card>
    <h2 class="me-author-name">Author</h2>
    <div class="me-author-description">
      <span><i class="el-icon-user"></i> &nbsp;wicking</span>
      <span><i class="me-icon-job"></i> &nbsp;有志青年</span> 
      <br/>
      <span><i class="el-icon-location-outline"></i> &nbsp;江苏&泰州</span>
      <span><i class="me-icon-job"></i> &nbsp;java菜鸟</span>  
      <br/>
      <span><i class="el-icon-mobile-phone"></i> &nbsp;15651796102</span>
      <span><i class="me-icon-job"></i> &nbsp;可联系本人</span>  
    </div>
    <div class="me-author-tool">
      <i @click="showTool(qq)" :title="qq.title" class="iconfont icon-qq"></i>
      <i @click="showTool(bilibili)" :title="bilibili.title" class="iconfont icon-bilibili-fill"></i>
      <i @click="showTool(mail)" :title="mail.title">
        <svg-icon icon-class="mail"/>
      </i>
    </div>
  </el-card>

</template>

<script>
  export default {
    name: 'CardMe',
    data() {
      return {
        qq: {title: 'QQ', message: 'tencent://message/?uin=1684795520&Site=Sambow&Menu=yes'},
        bilibili: {
          title: '哔哩哔哩',
          message: 'https://space.bilibili.com/192654747'
        },
        mail: {
          title: '电子邮箱',
          message: 'mailto:lu1227jun@163.com'
        }
      }
    },
    methods: {
      showTool(tool) {
        window.open(tool.message,'_blank');
      }
    }
  }
</script>

<style scoped>
  .me-author-name {
    text-align: center;
    font-size: 30px;
    border-bottom: 1px solid #5FB878;
    padding-bottom: 10px;
  }

  .me-author-description {
    text-align:center;
    padding: 8px 0;
  }

  .me-icon-job {
    padding-left: 16px;
  }

  .me-author-tool {
    position: relative;
    text-align: center;
    padding-top: 10px;
  }

  .me-author-tool i {
    cursor: pointer;
    padding: 4px 10px;
    font-size: 30px;
  }
</style>
